<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-11-02 18:37:12
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-11-03 20:46:07
 * @FilePath: \票务管理\app\ticketing-management\vue-project\src\views\home\TrainNumber\index.vue
 * @Description: 
 * qq1908552310
-->

<template>
    <div class="train-container">
        <div style="width: 100%;height:100%;padding: 10px;" v-if="TabTypeList.type == 'data'">
            <div :class="{ 'isWide': isWide, 'isNarrow': isNarrow }">
                <div class="header-left">

                    <div>
                        创建时间
                    </div>
                    <a-config-provider :locale="loca">
                        <a-space class="time" direction="vertical">
                            <a-range-picker style="width: 220px;" @change="onChange" v-model:value="StartEndTime" />
                        </a-space>
                    </a-config-provider>
                    <div class="trainType">
                        车次类型
                    </div>
                    <a-space>
                        <a-select v-model:value="SelectValue" style="width: 85px" @change="handleChange">
                            <a-select-option value="全部">全部</a-select-option>
                            <a-select-option value="高速动车">高铁</a-select-option>
                            <a-select-option value="普通列车">普通</a-select-option>
                            <a-select-option value="动车">动车</a-select-option>
                            <a-select-option value="普快">普快</a-select-option>
                            <a-select-option value="特快">特快</a-select-option>
                        </a-select>
                    </a-space>
                </div>
                <div class="header-right">
                    <a-checkbox @change="FlageChange">启用</a-checkbox>
                    <a-input-search class="searchInp" placeholder="搜索ID/车次" style="width: 135px" @search="onSearch" />
                    <a-button @click="addTable" type="primary" style="background: #1BA9BA;">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        新增车次
                    </a-button>
                </div>
            </div>
            <div class="train-main">
                <el-table :data="TabLe.tableData" stripe style="width: 100%">
                    <el-table-column align="center" prop="id" label="ID" width="40" />
                    <el-table-column align="center" label="车次/类型">
                        <template #default="scope">
                            <div style="text-align: center;">
                                <div style="width: 100%;color:#1BA9BA;font-weight: 700;">{{ scope.row.train_number }}
                                </div>
                                <div style="width: 100%;">{{ scope.row.train_type }}</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column borderLeft="solid 1px #ccc" align="center" prop="train_manager" label="车长"
                        width="70" />
                    <el-table-column align="center" prop="total_seats" label="总座位数" width="100" />
                    <el-table-column align="center" prop="carriage_number" label="车厢数量" width="100" border />
                    <el-table-column align="center" prop="passenger_limit" label="限乘人数" />
                    <el-table-column align="center" prop="created_at" label="创建时间" width="151" />
                    <el-table-column align="center" prop="status" label="状态">
                        <template #default="{ row }">
                            <div style="font-size: 12px;">
                                <el-switch v-model="row.status" active-value="1" inactive-value="0" class="ml-2"
                                    style="--el-switch-on-color: #1BA9BA; --el-switch-off-color: #ACB1BF" />
                                {{ row.status == 1 ? "启用" : "停用" }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <div style="text-align: center;" v-if="scope.row.status == '1'">
                                <el-tooltip content="编辑">
                                    <el-icon size="17px" @click="edit(scope)" color="#1BA9BA">
                                        <Edit />
                                    </el-icon>
                                </el-tooltip>
                                <a-popconfirm style="width: 120px;" title="确认要删除啊?" ok-text="是" cancel-text="否"
                                    @confirm="confirmDel(scope)" @cancel="cancel">
                                    <el-icon style="margin-left: 10px;" size="17px" color="#1BA9BA">
                                        <Delete />
                                    </el-icon>
                                </a-popconfirm>

                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <div class="block">
                    <el-config-provider :locale="zhCn">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="page.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="page.lengths">
                        </el-pagination>
                    </el-config-provider>
                </div>
            </div>

        </div>
        <div style="background:#f5f5f5;width: 100%;height:100%;padding: 10px;" v-else>
            <router-view></router-view>
        </div>

    </div>
</template>
<script setup lang="ts">
/* carriage_number: "10"
created_at: "2023-10-13 12:00:00"
id: 1
passenger_limit: "200"
status: "1"
total_seats: "100"
train_manager:"张三"
train_number: "G1"
train_type: "高速动车" */

import * as api from "../../../api/index"
import { PlusOutlined } from '@ant-design/icons-vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import loca from 'ant-design-vue/es/locale/zh_CN';
import TabAddEdit from "@/components/TabAddEdit.vue";
import { onMounted, onCreated, onBeforeUnmount, reactive, ref, watch, computed } from "vue";
import { Moment } from 'moment';
import { useRoute, useRouter } from 'vue-router';
import { useTainStore } from '@/modules/train'
import { useEditTrain } from '@/modules/edittrain'
import { message } from 'ant-design-vue';


const route = useRoute()
const router: any = useRouter()

const StartEndTime = ref<Moment[]>([])
const SelectValue: any = ref('全部')
const isDevToolsOpen = ref(false);

const EditTrain = useEditTrain()
const TainStore = useTainStore()


const page = reactive({
    currentPage: TainStore.currentPage,
    pageSize: TainStore.pageSize,
    lengths: 0
})

// 检测页面宽度
const isWide = ref(true);
const isNarrow = ref(false);

const TabLe = reactive({
    tableData: [], //分页完的数据
    datalist: [] //所有数据
})

// 编辑/新增
const TabTypeList = reactive({
    type: 'data',
    data: []
})

const dialogVisible = ref(false)

// 每页的条数
const handleSizeChange = (val: any) => {
    console.log(`每页 ${val} 条`);
    page.pageSize = val
    TainStore.setPageSize(val)
    TainStore.setCurrentPage(1)
    page.currentPage = 1
    getTickets()

}
// 当前页
const handleCurrentChange = (val: any) => {
    console.log(`当前页: ${val}`);
    page.currentPage = val
    TainStore.setCurrentPage(val)
    getTickets()
}


const getTickets = async () => {
    await TainStore.getTickets()
    TabLe.tableData = TainStore.list
    TabLe.datalist = TainStore.datalist
    page.lengths = TainStore.datalist.length
}

const onChange = (date: Moment, dateString: string[]) => {
    if (date != null) {
        const startDate = dateString[0]
        const endDate = dateString[1]
        const filteredData = TabLe.datalist.filter((item: any) => {
            let formattedTime = item.created_at.split(' ')[0]
            return formattedTime >= startDate && formattedTime <= endDate;
        });
        TabLe.tableData = filteredData
        page.lengths = filteredData.length
    } else {
        page.pageSize = 5
        getTickets()
    }

};
const handleChange = (value: string) => {
    if (value == "全部") {
        page.pageSize = 5
        getTickets()
    } else {
        page.pageSize = 10
        let TableFilter = TabLe.datalist.filter((item: any) => item.train_type == value)
        TabLe.tableData = TableFilter
        page.lengths = TableFilter.length
    }
}
const FlageChange = (checkedValue: any) => {
    console.log(checkedValue.target.checked, "checkedValue")
    if (checkedValue.target.checked == true) {
        TabLe.tableData.forEach((item: any) => {
            item.status = '1'
            console.log(item)
        })
    } else {
        getTickets()
    }
}
const onSearch = (searchValue: string) => {
    console.log('use value', searchValue);
};

const handleWindowResize = () => {
    const windowWidth = window.innerWidth;
    if (windowWidth > 1200) {
        isWide.value = true;
        isNarrow.value = false;
    } else if (windowWidth < 1200) {
        isWide.value = false;
        isNarrow.value = true;
    }
};
onMounted(() => {
    window.addEventListener('resize', handleWindowResize);
    getTickets()
    handleWindowResize();
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', handleWindowResize);
});


// 新增
const addTable = () => {
    TabTypeList.type = 'add'
    localStorage.setItem('type', 'add')
    router.push('/home/trainnumber/addtrain')
}
// 编辑
const edit = (value: any) => {
    TabTypeList.type = 'edit'
    localStorage.setItem('type', 'edit')
    router.push('/home/trainnumber/edittrain')
    EditTrain.setList(value.row)
}
// 删除
const confirmDel = async (e: any) => {
    console.log(e.row.id);
    message.success('确认删除');
    let data = await api.deleteTicket(`http://localhost:7001/v1/api/ticket/${e.row.id}`)
    console.log(data)
    if (data.data.code == 200) {
        message.success('删除成功');
        getTickets()
    }
};

const cancel = (e: MouseEvent) => {
    console.log(e);
    message.error('取消删除');
};

watch(() => router, () => {
    let type = localStorage.getItem('type')
    if (route.path == '/home/trainnumber') {
        if (type == 'data') {
            TabTypeList.type = 'data'
        } else if (type == 'add') {
            TabTypeList.type = 'add'
            router.push('/home/trainnumber/addtrain')
        } else if (type == 'edit') {
            TabTypeList.type = 'edit'
            router.push('/home/trainnumber/edittrain')
        }
    }
    getTickets()
}, { deep: true, immediate: true })

</script>

<style scoped lang="scss">
::v-deep .el-dialog {
    width: 600px;
}

::v-deep .el-table th.el-table__cell {
    background-color: #d8dbe2;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.train-container {
    width: 100%;
    height: 600px;
    background-color: #fff;

    .el-pagination {
        justify-content: flex-end;
    }

    .isWide {
        // 没有打开开发者工具
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;

        .header-left {
            width: 40%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-right {
            width: 28%;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
    }

    .isNarrow {
        // 打开开发者工具后的样式
        // ...
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;

        .header-left {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .time {
                margin-left: 5px;
            }

            .trainType {
                margin: 0 5px;
            }
        }

        .header-right {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .searchInp {
                margin: 0 5px;
            }
        }
    }
}
</style>